class Registry{
    constructor(){
        // 构造函数--将DOM储存为属性避免重复声明
        this.user = $(".user");//用户名
        this.pass = $(".pass");//密码
        this.repass = $(".repass");//重复密码
        this.tel = $(".tel");//手机号
        this.submit = $("#submit");//提交按钮
        // 多个提示信息框
        this.spans = $(".regit p span");
    }
    init(){
        this.vaildator();
    }
    // 表单验证
    vaildator(){
        // 创建手机号正则对象
        let regTel = /^1[3,5,8]\d{9}$/;
        let regPass = /^[a-z0-9A-Z]{6}[a-z0-9A-Z]*$/;

        // 提前将this进行储存避免事件绑定时指向错误，尽量全部使用_this
        let _this = this;
        // 用户名和密码框获取焦点时应该提示输入的格式，且如果没有输入应当将提示信息隐藏
        // 用户名输入框添加焦点事件
        _this.user.on("focus",()=>{
            // 改变用户名提示信息，并显示
            _this.spans.eq(0).html("<strong>用户名要求：</strong>请使用至少7-14位中文、字母、数字和符号");
           

        })
        // 用户名输入框添加失去焦点事件
        _this.user.on("blur",()=>{
            // 改变用户名提示信息，并显示
            if(_this.user.val()!==""){
                if(_this.user.val().replace(/[\u4e00-\u9fa5]/g,"**").length<7){
                    _this.spans.eq(0).html("用户名长度太短了，请重新输入！！！");
                    _this.spans.eq(0).css("color","red");
                    _this.user.css("border-bottom","2px solid red");
                    _this.user.falg=false;
                }else if(_this.user.val().replace(/[\u4e00-\u9fa5]/g,"**").length>=7&&_this.user.val().replace(/[\u4e00-\u9fa5]/g,"**").length<=14){
                    
                    // 用户名输入正确判断是否重名
                    $.ajax({
                        method:"post",
                        url:"http://localhost:3000/list/regit",
                        data:{"user":_this.user.val()},
                        dataType:"json"
                    }).then(function(data){
                        console.log(data)
                        if(data.status==1){
                            _this.spans.eq(0).html("这个名字太火爆了，请重新输入！！！");
                            _this.spans.eq(0).css("color","red");
                            _this.user.css("border-bottom","2px solid red");
                            _this.user.falg=false;
                        }else{
                            _this.spans.eq(0).html("");
                            _this.spans.eq(0).css("color"," rgb(41, 250, 14)");
                            _this.user.css("border-bottom","2px solid rgb(41, 250, 14)");
                            _this.user.falg=true;
                        }
                        detection()
                    })
                }else{
                    _this.spans.eq(0).html("用户名长度太长了，请重新输入！！！");
                    _this.spans.eq(0).css("color","red");
                    _this.user.css("border-bottom","2px solid red");
                    _this.user.falg=false;
                }
            }else{
                _this.spans.eq(0).html("");
                _this.spans.eq(0).css("color","red");
                _this.user.css("border-bottom","2px solid red");
                _this.user.falg=false;
            }
            detection()
        })
        // 用户名输入框input事件判断键入的是否为空格、换行等这些需要禁止键入
        _this.user.on("input",()=>{
            _this.user.val(_this.user.val().replace(/\s/,""))
        })


        // 密码输入框添加焦点事件
        _this.pass.on("focus",()=>{
            // 改变密码提示信息，并显示
            _this.spans.eq(1).html("<strong>密码要求：</strong>请使用至少6个或更多字符,并混合使用字母、数字和符号")
            // _this.pass.css("border-bottom"," 2px solid #0072de")
            // _this.spans.eq(1).css("color","black")
        })
        // 密码输入框input事件判断键入的是否为空格、换行等这些需要禁止键入
        _this.pass.on("input",()=>{
            _this.pass.val(_this.pass.val().replace(/\s/,""))
        })
        // 密码输入框添加失去焦点事件
        _this.pass.on("blur",()=>{
            // 改变密码提示信息，并显示
            if(_this.pass.val()!==""){
                if(regPass.test(_this.pass.val())){
                    // 键入的手机号满足条件清除提示信息并改变input的边框颜色
                    _this.spans.eq(1).html("")
                    _this.pass.css("border-bottom","2px solid rgb(41, 250, 14)")
                    _this.repass.prop("disabled",false)
                    _this.spans.eq(1).css("color","rgb(51, 250, 34)")
                    _this.pass.falg=true;
                }else{
                    _this.spans.eq(1).html("<strong>密码输入有误：</strong>请使用至少6个或更多字符,并混合使用字母、数字和符号")
                    _this.spans.eq(1).css("color","red")
                    _this.pass.css("border-bottom","2px solid red")
                    _this.repass.val("")
                    _this.repass.prop("disabled",true)
                    _this.pass.falg=false;
                }
            }else{
                _this.spans.eq(1).html("")
                _this.spans.eq(1).css("color","red")
                _this.repass.val("")
                _this.repass.prop("disabled",true)
                _this.pass.css("border-bottom","2px solid red")
                _this.pass.falg=false;
            }
            detection()
        })
        
        // 确认密码输入框失去焦点事件
        _this.repass.on("blur",()=>{
            if(_this.repass.val()!==""){
                // 改变用户名提示信息，并显示
                if(_this.repass.val()===_this.pass.val()){
                    // 键入的手机号满足条件清除提示信息并改变input的边框颜色
                    _this.spans.eq(2).html("")
                    _this.repass.css("border-bottom","2px solid rgb(41, 250, 14)")
                    _this.repass.falg=true;
                }else{
                    _this.spans.eq(2).html("两次密码输入不一致，请重新输入！！")
                    _this.repass.css("border-bottom","2px solid red")
                    _this.spans.eq(2).css("color","red")
                    _this.repass.falg=false;
                }
            }else{
                _this.spans.eq(2).html("")
                _this.repass.css("border-bottom","2px solid red")
                _this.repass.falg=false;
            }
            detection()
            
        })
        // 确认密码输入框input事件判断键入的是否为空格、换行等这些需要禁止键入
        _this.repass.on("input",()=>{
            _this.repass.val(_this.repass.val().replace(/\s/,""))
        })



        // 手机号失去焦点事件--判断是否满足手机号的标准
        _this.tel.on("blur",()=>{
            // 判断输入是否为空
            if(_this.tel.val()!==""){
                if(_this.tel.val().length<11){
                    _this.spans.eq(3).html("手机号长度有误，请重新输入！！")
                    _this.spans.eq(3).css("color","red")
                    _this.tel.css("border-bottom","2px solid red")
                    _this.tel.falg=false;
                }else{
                    // 正则判断输入的手机号是否满足条件
                    if(regTel.test(_this.tel.val())){
                        // 键入的手机号满足条件清除提示信息并改变input的边框颜色
                        _this.spans.eq(3).html("")
                        _this.tel.css("border-bottom","2px solid rgb(41, 250, 14)")
                        _this.tel.falg=true;
                    }else{
                        // 不满足条件则抛出错误信息
                        _this.spans.eq(3).html("手机号输入有误，请重新输入！！")
                        _this.spans.eq(3).css("color","red")
                        _this.tel.css("border-bottom","2px solid red")
                        _this.tel.falg=false;
                    }
                }
            }else{
                // 如果为空时失去焦点则将提示信息清除
                _this.spans.eq(3).html("");
                _this.tel.css("border-bottom","2px solid red")
                _this.tel.falg=false;
            }

            detection()
            
        })
        // 手机号键入时应该判断输入的是否是数字，同时禁止键入非数字
        _this.tel.on("input",()=>{
                // 判断输入的是否是数字如果不是数字则将键入的转成空
                _this.tel.val(_this.tel.val().replace(/\D/g,""));
                // 控制手机号的键入长度只能输入小于等于11位
                if(_this.tel.val().length>11){
                    _this.tel.val(_this.tel.val().substring(0,11))
                }
        })
        

        function detection(){
            if(_this.user.falg&&_this.pass.falg&&_this.repass.falg&&_this.tel.falg){
                _this.submit.prop("disabled",false);
            }else{
                _this.submit.prop("disabled",true);
            }
        }

    }
}
export{
    Registry
}